'use client';

import { formatAddress, formatDate } from '@/lib/utils';
import { User, Pickaxe, Coins, Link2 } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { multiChainApi } from '@/lib/multi-chain-api';
import { useChain } from '@/context/ChainContext';

interface Activity {
  id: string;
  type: string;
  title: string;
  wallet: string;
  time: string;
  icon: string;
  color: string;
  bgColor: string;
}

const iconMap = {
  User,
  Pickaxe,
  Coins,
  Link2,
};

export function RecentActivity() {
  const { currentChain } = useChain();
  
  const { data: activities, isLoading } = useQuery<Activity[]>({
    queryKey: ['recent-activity', currentChain],
    queryFn: async () => {
      const client = multiChainApi.getClient(currentChain);
      const response = await client.get('/api/v1/admin/recent-activity');
      return response.data;
    },
    refetchInterval: 30000, // Refresh every 30 seconds
  });

  // Default data while loading or on error
  const defaultActivities: Activity[] = [
    {
      id: '1',
      type: 'user_registered',
      title: 'New User Registered',
      wallet: '0x1234567890123456789012345678901234567890',
      time: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
      icon: 'User',
      color: 'text-blue-600',
      bgColor: 'bg-blue-100',
    },
    {
      id: '2',
      type: 'miner_created',
      title: 'New Miner Created',
      wallet: '0x2345678901234567890123456789012345678901',
      time: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
      icon: 'Pickaxe',
      color: 'text-green-600',
      bgColor: 'bg-green-100',
    },
    {
      id: '3',
      type: 'rewards_distributed',
      title: 'Rewards Distributed',
      wallet: '0x3456789012345678901234567890123456789012',
      time: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
      icon: 'Coins',
      color: 'text-purple-600',
      bgColor: 'bg-purple-100',
    },
    {
      id: '4',
      type: 'referral_bonus',
      title: 'Referral Bonus Earned',
      wallet: '0x4567890123456789012345678901234567890123',
      time: new Date(Date.now() - 1000 * 60 * 45).toISOString(),
      icon: 'Link2',
      color: 'text-orange-600',
      bgColor: 'bg-orange-100',
    },
  ];

  const displayActivities = activities || defaultActivities;

  if (isLoading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 4 }).map((_, index) => (
          <div key={index} className="flex items-start space-x-3 animate-pulse">
            <div className="rounded-lg p-2 bg-gray-200 w-8 h-8"></div>
            <div className="flex-1 min-w-0">
              <div className="h-4 bg-gray-200 rounded w-3/4 mb-1"></div>
              <div className="h-3 bg-gray-200 rounded w-1/2 mb-1"></div>
              <div className="h-3 bg-gray-200 rounded w-1/4"></div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {displayActivities.map((activity) => {
        const Icon = iconMap[activity.icon as keyof typeof iconMap] || User;
        return (
          <div key={activity.id} className="flex items-start space-x-3">
            <div className={`rounded-lg p-2 ${activity.bgColor}`}>
              <Icon className={`h-4 w-4 ${activity.color}`} />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900">{activity.title}</p>
              <p className="text-xs text-gray-500">{formatAddress(activity.wallet)}</p>
              <p className="text-xs text-gray-400 mt-1">
                {formatDate(new Date(activity.time))}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
}